<ti-table [srcData]="srcData" [(displayedData)]="displayedData" [closeOtherDetails]="true">
  <table>
    <thead>
      <tr>
        <th details-icon-column>{{columns[0].title}}</th>
        <th>{{columns[1].title}}</th>
        <th>{{columns[2].title}}</th>
        <th>{{columns[3].title}}</th>
        <th>{{columns[4].title}}</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let row of displayedData;index as i">
        <tr>
          <td details-icon-column>
            <ti-details-icon [row]="row" [index]="i"></ti-details-icon>
          </td>
          <td>{{row.firstName}}</td>
          <td>{{row.lastName}}</td>
          <td>{{row.age}}</td>
          <td>{{row.email}}</td>
        </tr>
        <tr *tiDetailsTr="row">
          <td tiColspan>
            <div class="ti3-table-detail-container">
              <nested-table [data]="row.data"></nested-table>
            </div>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</ti-table>
